<template>
    <div class="news">
        <div class="news-top">
            <div class="news-top-title">
                新闻资讯
            </div>
            <div class="news-top-details">
                News information
            </div>
        </div>
        <div class="news-content">
            <div class="news-content-list">
                <div class="news-content-list-item flex_bet" v-for="(item, idx) of newsList" @click="newsListClick(item)"
                    :key="idx">
                    <div class="news-content-list-item-content">
                        <div class="news-content-list-item-content-title line-clamp-2">{{ item.title }}</div>
                        <div class="news-content-list-item-content-data flex_bet">
                            <div class="flex_start">{{item.time}}-{{ item.day }}</div>
                            <div class="flex_start"> <i class="el-icon-share" style="margin-right: 4px;"></i>分享</div>
                        </div>
                    </div>
                    <div class="news-content-list-item-content-newsImg">
                        <img :src="item.newsImg" alt="" srcset="">
                    </div>
                </div>
            </div>
            <!-- <div class="news-content-pagination">
                <el-pagination background layout="prev, pager, next" :total="newsList.length">
                </el-pagination>
            </div> -->
        </div>

        <Footer desc="持久续航、超低成本直播间" desc1="开启数字化直播新时代"></Footer>
    </div>
</template>
<script>
import Footer from '@/components/footer/index1.vue'
export default {
    components: { Footer },
    data() {
        return {
            newsList: [
                {
                    day: '08',
                    time: '2023-08',
                    title: '河北品达网络助力企业营销走上新台阶',
                    browse: 0,
                    sharing: 0,
                    details: '很多企业在做网络营销的时候很迷茫，第一种迷茫的是知道互联网营销很重要但是却不知道怎么做。第二种迷茫的是做了之后感觉效果没有达到预期，不知道如何选择互联网营销产品，第三种迷茫的是想要组建自己的互联网营销团队，却不知道招什么样的人，如何进行监督。 河北品达网络在网络营销领域深耕6年有余，深知互联网营销乱象也非常理解企业想要迫切改变现状通过互联网打开市场的想法......',
                    newsImg: 'https://static.pdwl.net/jituan/images/aboutUs/icon7.png',
                },
                {
                    day: '06',
                    time: '2023-08',
                    title: '河北品达网络牛视系统上线',
                    browse: 0,
                    sharing: 0,
                    details: '很多企业在做网络营销的时候很迷茫，第一种迷茫的是知道互联网营销很重要但是却不知道怎么做。第二种迷茫的是做了之后感觉效果没有达到预期，不知道如何选择互联网营销产品，第三种迷茫的是想要组建自己的互联网营销团队，却不知道招什么样的人，如何进行监督。 河北品达网络在网络营销领域深耕6年有余......',
                    newsImg: 'https://static.pdwl.net/jituan/images/aboutUs/icon12.png',
                },
                {
                    day: '05',
                    time: '2023-08',
                    title: '河北品达网络万词闪投为企业营销带来新曙光',
                    browse: 0,
                    sharing: 0,
                    details: '随着后疫情时代的到来，国内经济内循环成为新的定调，网络营销也逐渐竞争激烈了起来，如何选择一款好的网络营销产品便成了很多企业需要思考的问题。河北品达网络根据自身5年来的实战经验开发出一款万词闪投产品，可以帮助企业快速的打开市场。 万词闪投产品整合了百度竞价，360竞价，搜狗竞价，神马竞价......',
                    newsImg: 'https://static.pdwl.net/jituan/images/aboutUs/icon13.png',
                },
                {
                    day: '03',
                    time: '2023-08',
                    title: '“万词闪投”为何成为越来越多人的网络营销选择',
                    browse: 0,
                    sharing: 0,
                    details: '当前做互联网营销局势分析，都是为了获取更多的流量，从而带来客户。从获取途径来划分，可分为免费流量和付费流量两种，其中付费流量依旧为重中之重。 付费流量方面，“万词闪投”产品在后台同步整合了百度，360，搜狗，神马四大搜索引擎的搜索竞价......',
                    newsImg: 'https://static.pdwl.net/jituan/images/aboutUs/icon10.png',
                },
                {
                    day: '01',
                    time: '2023-08',
                    title: '【不吹不黑转自代理商】万词霸屏厂家大战该如何选择？',
                    browse: 0,
                    sharing: 0,
                    details: '最近市面上掀起一场万词霸屏厂商大战的浪潮，先是某推宝诋毁某推侠，后有某上来攻击某推侠，某推侠大力回击，推出会员包月机制。 下面是某推侠的价格图，价格可以多是非常低了，并且网推侠大力增加目录，效果一路霸屏。 作为代理过多家产品的服务商......',
                    newsImg: 'https://static.pdwl.net/jituan/images/aboutUs/icon9.png',
                },
                {
                    day: '20',
                    time: '2023-08',
                    title: '爱采购cpc招商为什么选择品达网络',
                    browse: 0,
                    sharing: 0,
                    details: '河北品达网络科技有限公司成立于2018年。作为一家新兴的互联网公司，品达网络深知网络营销市场竞争之惨烈，市场之混乱。品达网络旨在改变互联网营销产业乱象，真正帮助中小企业实现互联网+。 品达网络科技公司在自身研发产品基础上，与百度爱采购进行深入合作，推出爱采购cpc服务......',
                    newsImg: 'https://static.pdwl.net/jituan/images/aboutUs/icon11.png',
                },
            ],
            newsListParam: {
                page: 1,
                lime: 6,
                total: 0
            }
        }
    },
    methods:{
        newsListClick(){
            this.$router.push({path:'/aboutUs'})
            window.scrollTo(0, 0);
            this.$store.commit('setAboutUsType', 3)
        }
    }
}
</script>
<style lang="scss" scoped>
.news {
    &-top {
        background-image: url('../../assets/image/4.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        height: 480px;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &-title{
            font-size: 28px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 33px;
            margin-top: 40px;
        }
        &-details{
            font-size: 16px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            margin-top: 10px;
            line-height: 19px;
        }
    }

    &-content {
        &-list {
            width: 100%;
            margin: 0 auto;

            &-item {
                width: 100%;
                padding: 40px 0px ;
                height: 100%;
                border-bottom: 1px solid #E6E6E6;
                &:last-child{
                    border-bottom: none;
                    padding-bottom: 80px;
                }
                &-content {
                    width: calc(100% - 140px);
                    margin-right: 40px;
                    margin-left: 20px;
                    &-title {
                        font-size: 20px;
                        line-height: 23px;
                        font-weight: 400;
                        color: #000000;
                        line-height: 24px;
                    }

                    &-data {
                        margin-top: 15px;
                        font-size: 12px;
                        color: #999999;
                        line-height: 14px;

                        div:last-child {
                            margin-left: 35px;
                        }
                    }

                    &-details {
                        font-size: 14px;
                        color: #D0D0D0;
                        line-height: 24px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                    }
                }

                .news-content-list-item-content-newsImg {
                    width: 90px;
                    height: 60px;
                    margin-right: 20px;

                    img {
                        width: 90px;
                        height: 60px;
                        background-size: 100% 100%;
                    }
                }
            }
        }

        &-pagination {
            width: 100%;
            margin: 40px auto 0;
            text-align: center;

            ::v-deep .el-pager li,
            ::v-deep .btn-next,
            ::v-deep .btn-prev {
                background: #181818 !important;
                color: #fff;
                border: 1px solid #323232;
                width: 40px;
                height: 40px;
                line-height: 40px;
            }

            ::v-deep .el-pager li.active {
                background: linear-gradient(124deg, #006FFF 0%, #62DEA6 100%) !important;
                color: #fff;
                border: 1px solid #323232;
            }

        }
    }
}</style>